FE8828 Programming Web Applications in Finance

Week 1
What’s Internet? What’s Web?
Launch into the Cloud
Catch-up with R

Dr. Yang Ye <Email:yy@runchee.com>

Nov 02, 2017

Introduction: Topics for Week 1-3

Introduction: Topics for Week 4-6

Introduction: Assingments

Introduction: Objective

  1. Know the way of Internet: the network, the cloud and the application.
  2. Build real-world data-driven reports and dashboard, data visualization.
  3. Latest Internet technology in cryptocurrency and payment system like Bitcoin and Blockchain.

Where does this course stands on?

Keep calm and code on

Lecture 01: What’s Internet? What’s Web?

Network

Network is to connect the dots

Network is to connect the dots devices

Building network

Building network

Network talks

After laying down the wires, what runs inside?

Network talks

  1. Information turns to packet
  2. Protocol designs the packet and process
  3. Infrastructure is to route the packets to the destination.

Packet

  1. Information turns to packet

Protocol

  1. Protocol designs the packet and process

TCP Session

DHCP Session

Routing/Gateway

  1. Infrastructure helps to transmit and route the packets to the destination.

TCP/IP and Internet

The Defense Advanced Research Projects Agency (DARPA) created the TCP/IP model in the 1970s to build ARPANET. ARPANET is a wide area network that preceded the internet.

What does TCP/IP gives?

  1. IP (Internet Protocol, IP address)
  2. TCP (Transmission Control Protocol) TCP provides reliable, ordered, and error-checked delivery of a stream

TCP/IP

This is why and how Internet growed in size

What happens after plugging cable, turning on Wi-Fi?

When it wants to visit someone on the network? 1/2

Demo with nslookup.

When it wants to visit someone on the network? 2/2

HTTP/HTML

HTTP Request/Response

HTTP/HTML

In browser, you can see the green lock in address bar. App doesn’t show it, we just trust that they are using HTTPS.

Web

When you have HTML and URL (Uniform Resource Locator), Web is born.

How this resource is used in the document.

    <div class="thumbinner" style="width:302px;">
        <a href="/wiki/File:Web_Index.svg" class="image">
        <img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/65/Web_Index.svg/300px-Web_Index.svg.png"
            width="300" height="154" class="thumbimage"  />
        </a>
    </div>

Web Browser

First generation

Web application

Web application

To recap

Why the Internet succeeded?

To recap

Web application

Lecture 03: R Markdown and Shiny (layout)

Introduction

Markup and Markdown

Markdown example

---
title: My first bitcoin
subtitle: and how I bought a pizza!
author: "Gru"
date: "Jul 9, 2010"
---

# How I bought it

I found someone was selling _10000_ on ebay for __$30__.
I think that's

- cool
- fun
- hacker

# How I used it

I forgot to bring my wallet the other day.
So I used **the bitcoins** to buy some pizza.

![Pizza](../notes/imgs/bitcoin-pizza.png)

Markdown doc example

Markdown: Header and Code

Headers

More hashtag, deeper level.

# Header1
## Header2
### Header3

Code

Give four spaces before it

    if (a > 0) {
      print(a)
    }
if (a > 0) {
  print(a)
}

Markdown: List

* First paragraph.
Continued.

* Second paragraph. With a code block, which must be indented
eight spaces:

        { code }

Markdown: Multi-level lists

Put four more spaces for each level.

* fruits
    + apples
        - macintosh
        - red delicious
    + pears
* vegetables
    + broccoli
    + chard

Markdown: Ordered Lists

Put 4 more spaces for each level.

#. Chapter 1
    #. Section 1.1
    #. Section 1.2
#. Chapter 2
#. Chapter 3

  1. Chapter 1
    1. Section 1.1
    2. Section 1.2
  2. Chapter 2
  3. Chapter 3

Table

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

Markdown: Inline formatting

Emphasis

To emphasize some text, surround it with *s or _, like this:

This text is \_emphasized with underscores\_, and this
is \*emphasized with asterisks\*.
Double * or _ produces strong emphasis:

This is \*\*strong emphasis\*\* and \_\_with underscores\_\_.

This text is emphasized with underscores, and this is emphasized with asterisks. Double * or _ produces strong emphasis.

This is strong emphasis and with underscores. A * or _ character surrounded by spaces, or backslash-escaped, will not trigger emphasis.

Markdown: Inline formatting

Strikthrough

This ~~is deleted text.~~ This is deleted text.

Superscripts and subscripts

H~2~O is a liquid. 2^10^ is 1024. H2O is a liquid. 210 is 1024.

Verbatim. inline code

Use backtick `. What is the difference between `>>=` and `>>`? What is the difference between >>= and >>?

Note:

Images

A link immediately preceded by a ! will be treated as an image. The link text will be used as the image’s alt text:

![Pizza](imgs/bitcoin-pizza.png)

Pizza

Pizza

Formula

MathJax. Use laTex syntax. There are many online references.

Inline with text

$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)

Centered

$$\sum_{i=1}^n X_i$$

\[\sum_{i=1}^n X_i\]

R Markdown

Reference in R Studio

Create it via File > New File > R Markdown.

R Markdown Document example

---
title: "Data Analysis Report"
author: "Yang Ye"
date: "October 23, 2017"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## Report
```{r cars}
summary(cars)
```

## Including Plots
```{r pressure, echo=FALSE}
plot(pressure)
```

R Markdown Document Output

In the header, you can change the output to other types:

Code block for R Markdown

## [1] 7

Chunk options

a <- runif(100, 0, 1)

R Markdown example: Table

```{r kable}
knitr::kable(
  mtcars[1:5, ], 
  caption = "A knitr kable."
)
```
A knitr kable.
mpg cyl disp hp drat wt qsec vs am gear carb
Mazda RX4 21.0 6 160 110 3.90 2.620 16.46 0 1 4 4
Mazda RX4 Wag 21.0 6 160 110 3.90 2.875 17.02 0 1 4 4
Datsun 710 22.8 4 108 93 3.85 2.320 18.61 1 1 4 1
Hornet 4 Drive 21.4 6 258 110 3.08 3.215 19.44 1 0 3 1
Hornet Sportabout 18.7 8 360 175 3.15 3.440 17.02 0 0 3 2

R Markdown example: plot

```{r plot1, echo = FALSE}
a <- filter(cars, speed > 4)
plot(a)
```

R Shiny

UI First

I removed everything in functions server and ui. This is the minimal Shiny.

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

fluidPage

Add some things

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(
  fluidPage(
    titlePanel("Hello Shiny!"),
    sidebarLayout(
      sidebarPanel(
        h1("Introduction to Layout"),
        h2("Sidebar Layout"),
        a("A link to Google", href="http://www.google.com"),
        tags$ul("About",
          tags$li("Who are we"),
          tags$li("What we do")
        ),
        tags$ol("Steps",
          tags$li("Write"),
          tags$li("Run")
        )
      ),
      mainPanel(
        img(src = "p19-Hero-Image-796x398.jpg")
      )
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

More tags

Each tag is a function.

h1("A header")
p("some text as a paragraph")
a("A link to Google", href="http://www.google.com")
img(src = "p19-Hero-Image-796x398.jpg", width = "100%")
tags$ul("title", tags$li("Item 1"), tags$li("Item 2"))
tags$ol("Step", tags$li("Item 1"), tags$li("Item 2"))

Note:

Panels

titlePanel() and wellPanel()

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(
  fluidPage(
    titlePanel("Hello Shiny!"),
    sidebarLayout(
      sidebarPanel(
        h1("Well 1"),
        wellPanel(
          h2("Well 1.1"),
          actionButton("goButton", "Go!")
        ),
        h1("Well 2"),
        wellPanel(
          h2("Well 2.1"),
          actionButton("goButton2", "Go!")
        )
      ),
      mainPanel(
      )
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

tabPanel

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(
  fluidPage(
    titlePanel("Hello Shiny!"),
    tabsetPanel(
      tabPanel("Plot", h1("plot")), 
      tabPanel("Summary", h1("summary")), 
      tabPanel("Image", img(src = "p19-Hero-Image-796x398.jpg"))
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

Column-based layout

library(shiny)

ui <- fluidPage(
  fluidPage(
    fluidPage(
      titlePanel("Hello Shiny!"),
      fluidRow(
        column(4,
               wellPanel(
                 dateInput("date", "How's weather today?")
               )
        ),
        column(6,
               h3("Plot"),
               wellPanel(plotOutput("distPlot"))
        ),
        column(2, h3("Extra"),
               wellPanel(plotOutput("extraPlot"))
               )
      )
    )

    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

Composition layout: Top and Down

library(shiny)
library(ggplot2)

ui <- fluidPage(
  fluidPage(
    fluidPage(
      title = "Diamonds Explorer",
      fluidRow(
        column(12,
               img(src = "p19-Hero-Image-796x398.jpg", width = "100%")
               )
      ),
      
      hr(),
      fluidRow(
        column(3,
               h4("Diamonds Explorer"),
               sliderInput('sampleSize', 'Sample Size', 
                           min=1, max=nrow(diamonds), value=min(1000, nrow(diamonds)), 
                           step=500, round=0),
               br(),
               checkboxInput('jitter', 'Jitter'),
               checkboxInput('smooth', 'Smooth')
        ),
        column(4, offset = 1,
               selectInput('x', 'X', names(diamonds)),
               selectInput('y', 'Y', names(diamonds), names(diamonds)[[2]]),
               selectInput('color', 'Color', c('None', names(diamonds)))
        ),
        column(4,
               selectInput('facet_row', 'Facet Row', c(None='.', names(diamonds))),
               selectInput('facet_col', 'Facet Column', c(None='.', names(diamonds)))
        )
      )
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
}

# Run the application 
shinyApp(ui = ui, server = server)

R Markdown can also contain Shiny

---
title: "MFE FE8828 Assignment 1"
date: 2017-11-03
output: html_document
runtime: shiny
---
  
```{r setup, include = FALSE}
```

```{r, echo = FALSE}
wellPanel("Inputs",
          numericInput("fav_num", "What's your favorite number?", 3))
```
Inputs

This is interactive document.

Assignments